<template>
	<view class="page-container bg-FFFFFF">
		<view style="height: 155px;">
			<view class="padded-10 detail-head">
				<view class="detail-head-container clearfix">
					<view class="padded-15 container-top">
						<view class="text-center font-weight-bold font-16">{{ cpmc }}</view>
						<view class="text-center padded-t-10 padded-l-25">
							<text class="font-24 font-weight-bold color-0655B2">{{ zgjes }}</text>
							<text class="font-12 color-9B9C9C padded-l-5">(元)</text>
						</view>
						<view class="padded-l-10 padded-r-10 padded-t-5">
							<hr class="divider">
						</view>
					</view>
					<view class="container-bottom clearfix">
						<button class="mini-btn pull-left border-radius-20 font-12 color-E8EBFF" type="primary" size="mini">免费产品咨询</button>
						<button class="mini-btn pull-right border-radius-20 font-12 bg-EDF4FF border-DDEAFF color-3180E7" type="primary" size="mini" plain="true">查看还款计划</button>
					</view>
				</view>
			</view>
		</view>
		<view class="padded-t-10 padded-l-25 padded-r-25 padded-b-15 bg-FFFFFF">
			<!--
			<view>
				<view class="color-1057A9 font-weight-bold">产品介绍</view>
				<view class="font-12">银行面向企业法人发放的抵押贷款。</view>
			</view>
			-->
			<view class="padded-t-10">
				<view class="color-1057A9 font-weight-bold">产品特点</view>
				<table class="detail-table padded-t-5 font-12" cellspacing="0">
					<tr class="bg-F2FAFF">
						<td style="width: 50%;">最高额度(万元)</td>
						<td>{{ zgje }}</td>
					</tr>
					<tr>
						<td>年化利率(%)</td>
						<td>{{ zxnhll }}</td>
					</tr>
				</table>
			</view>
			<view class="padded-t-25">
				<view class="color-1057A9 font-weight-bold">产品要求</view>
				<view class="font-12 padded-t-5 line-height-18">
					<text>{{ tiaojian }}</text>
					
				</view>
			</view>
			<view class="padded-t-40">
				<view class="color-1057A9 font-weight-bold">所需资料</view>
				<view class="font-12 padded-t-5"><text>{{ zxyq }}</text></view>
			</view>
			<view class="padded-60"></view>
		</view>
		
		<view class="padded-10 bottom-button">
			<button type="primary" class="font-14">立即申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			const id = options.id;
			if (id) {
			    const decodedId = decodeURIComponent(id);
			    if (decodedId) {
					this.getServerData(id);
			    }
			}
		},
		data() {
			return {
				cpmc: '',
				zgjes: '',
				zgje: '',
				zxnhll: '',
				tiaojian: '',
				zxyq: '',
			}
		},
		methods: {
			getServerData(id) {
				this.$request().then(res => {
					// 验证登入
				})
				
				// 使用 GET 方法请求数据
				uni.request({
				    url: 'https://wn.wdyky.com/index/jrgl/cpjs', // 请求地址
				    method: 'GET',
				    data: {
				    	id: id,
				    },
					success: (res) => {
				        // 请求成功的回调函数
				        console.log('请求成功:', res.data);
						if(res.data.code == 1){
							
							this.cpmc = res.data.data.cpmc;
							this.zgjes = res.data.data.zgjes;
							this.zgje = res.data.data.zgje;
							this.zxnhll = res.data.data.zxnhll;
							this.tiaojian = res.data.data.tiaojian;
							this.zxyq = res.data.data.zxyq;
						}
			
				    },
				    fail: function(err) {
				        // 请求失败的回调函数
				        console.error('请求失败:', err);
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '@/static/product.scss';
	
	.detail-head {
		height: 90px;
		background-image: linear-gradient(to bottom, #0250E5, #FAFBFE);
		
		.detail-head-container {
			background: #FFFFFF;
			position: relative;
			
			.container-top {
				background-image: linear-gradient(rgb(234, 243, 255), rgb(253, 254, 255));
				z-index: 1;
				position: absolute;
				width: 100%;
			}
			
			.container-bottom {
				width: 100%;
				top: 90px;
				position: absolute;
				box-shadow: 0 0 4px 4px rgba(240,240,240, 0.7);
				padding: 10px 25px 15px 25px;
			}
		}
	}
	
	.detail-table {
		width: 100%;
		border-right: 1px solid #D3E2FF;
		border-bottom: 1px solid #D3E2FF;
		
		tr {
			
			td {
				width: 50%;
				border-left: 1px solid #D3E2FF;
				border-top: 1px solid #D3E2FF;
				padding: 5px;
			}
		}
		
	}
	
	.bottom-button {
		background: #FFFFFF;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
	
</style>
